<template>
  <el-row :gutter="20">
    <el-col :span="6" class="h200">
      <v-chart class="chart" :option="score" :autoresize="true"/>
    </el-col>
    <el-col :span="6">
      <el-statistic :value="dataForm.company_score" class="mt50">
        <template #title>
          <div class="mb15">
            企业信息
          </div>
        </template>
        <template #suffix> / 20</template>
      </el-statistic>
      <div class="footer">得分</div>
    </el-col>
    <el-col :span="6">
      <el-statistic :value="dataForm.history_score" class="mt50">
        <template #title>
          <div class="mb15">
            历史信息
          </div>
        </template>
        <template #suffix> / 40</template>
      </el-statistic>
      <div class="footer">得分</div>
    </el-col>
    <el-col :span="6">
      <el-statistic :value="dataForm.contact_score" class="mt50">
        <template #title>
          <div class="mb15">
            联系人
          </div>
        </template>
        <template #suffix> / 40</template>
      </el-statistic>
      <div class="footer">得分</div>
    </el-col>
  </el-row>
</template>

<script setup name="client-statistics-index">
  import { useBase } from "@/hooks/base/useBase"
  import { use } from 'echarts/core';
  import { GaugeChart } from 'echarts/charts'; //引入图例
  import { CanvasRenderer } from 'echarts/renderers'; //使用canvas渲染，可选使用svg渲染
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    LegendComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';

  use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    LegendComponent,
    GaugeChart,
    CanvasRenderer
  ]);

  const { query } = useBase()

  const props = defineProps({
    model: {
      type: [String, Object],
      default: null,
    }
  });

  const dataForm = reactive({
    company_score: 0,
    history_score: 0,
    contact_score: 0,
  });

  const init = () => {
    $http({
      url: $http.adornUrl(`/${props.model}/score`),
      method: 'get',
      params: $http.adornParams({
        id: query.id
      }),
    }).then(({ data }) => {
      if (data && data.data && data.status === 200) {
        if(data.data.series) {
          score.series[0].data = data.data.series
        }
        if(data.data.company_score) {
          dataForm.company_score = parseInt(data.data.company_score)
        }
        if(data.data.history_score) {
          dataForm.history_score = parseInt(data.data.history_score)
        }
        if(data.data.contact_score) {
          dataForm.contact_score = parseInt(data.data.contact_score)
        }
      }
    })
  }

  onMounted(() => {
    init()
  })

  const score = reactive({
    series: [{
      type: 'gauge',
      progress: { show: true, width: 15 },
      axisLine: { lineStyle: { width: 15 }},
      pointer: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
      title: { offsetCenter: [0, '40%'], fontSize: 15 },
      detail: { fontSize: 20, offsetCenter: [0, 0], valueAnimation: true, },
      data: [{ value: 0, name: '较差' }]
    }]
  });
</script>

<style lang="scss" scoped>
  .footer {
    font-size: 12px;
    margin-top: 10px;
    color:var(--el-statistic-title-color);
  }
  .h200 {
     height: 200px;
  }
  .mt50 {
    margin-top: 50px;
  }
  .mb15 {
    margin-bottom: 15px;
  }
</style>
